<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div>
			<headerOpreate :opreate-datas="opreateDatas" style="float: left;" v-on:executeAction="executeAction"></headerOpreate>
			<div class="block" style="text-align:right;float: right">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<el-table border style="width: 100%;" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="devicename"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="文件名" align="center" prop="filename"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="上传时间" align="center" prop="time"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="执行操作" align="center">
				<template slot-scope="scope">
					<el-button size="small" type="primary" @click="download(scope.row)"><i class="fa fa-download" style="padding-right: 2px;font-size: 12px;"></i>下载</el-button>
					<el-button size="small" type="primary" @click="push(scope.row)"><i class="el-icon-eleg-icon_cloud-upload el-icon--left" style="padding-right: 2px;font-size: 12px;"></i>推送</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;float: right">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+" : this.getHours(), //hour 
					"m+" : this.getMinutes(), //minute 
					"s+" : this.getSeconds(), //second 
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				isReload: false,
				loading: false,
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				}]
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//下载
			download(row) {
				window.location.href = row.path;
			},
			//推送
			push(row) {
				this.$confirm('此操作将配置文件'+row.filename+'推送给设备'+row.devicename+',是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true;
					var param = {
						sns: [row.sn],
						filename: row.filename,
						path: row.path,
						md5: row.md5,
						UserId: parseInt(GloabFun.getKeyId())
					}
					HttpServer.httpPost.call(this, '/Api/Peripheral/ConfigPush', param , function(response) {}, function(response) {
						this.loading = false;
						if(response.data.code === 0) {
							if(response.data.response && response.data.response.length > 0){
								if(response.data.response[0].code === 0){
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								}else {
									this.$notify.error({
										title: '错误',
										message: response.data.response[0].msg,
										duration: 2500
									});
								}
							}else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				})
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/Device/BackUpList?fromwhat=0&index='+this.currentPage+'&pagesize='+this.pageSize, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						for(var i = 0 ; i < response.data.List.length ; i++){
							response.data.List[i].time = new Date(response.data.List[i].time).format('yyyy-MM-dd hh:mm:ss')
						}
						this.tableData = response.data.List;
						this.totalSize = response.data.total;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>